import React, { useEffect, useState } from 'react'
<<<<<<< HEAD
import { Button, Form, Input, InputNumber, Drawer, Select,TreeSelect } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import {getShopType,changerInf} from "../apis/shop"
import MyUpload from "../components/MyUpload2"
=======
import { Button, Form, Input, InputNumber, Drawer, Select, TreeSelect } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import { getShopType, changerShop } from "../apis/shop"
import MyUpload from "../components/MyUpload"
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
import qs from "querystring"

const { Option } = Select;

<<<<<<< HEAD
export default function ChaneShopType({inf}) {
=======
export default function ChaneShopType({ inf,updata }) {
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
    //新增抽屉
    useEffect(() => {
        form.setFieldsValue(inf)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [inf])

    useEffect(() => {
        fetchData()
<<<<<<< HEAD
      }, [])
    
      const fetchData = async () => {
        const res = await getShopType()
        settreeData(res.data.rows.children)
      }
=======
    }, [])

    const fetchData = async () => {
        const res = await getShopType()
        settreeData(res.data.rows.children)
    }
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40


    const [form] = Form.useForm()
    const [value, setValue] = useState(undefined);
    const [treeData, settreeData] = useState([])

    const [open, setOpen] = useState(false);
<<<<<<< HEAD
  
=======

>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
    function showDrawer() {
        setOpen(true);
    }
    const onClose = () => {
        setOpen(false);
    };

<<<<<<< HEAD
    const onFinish = async(values) => {
       
        // console.log(inf.pid);
        values.id = inf.id
        values.pid = inf.pid
        console.log(values);
        const info = qs.stringify(values)
        // console.log(info);
        await changerInf(info)
        
=======
    const onFinish = async (values) => {

        // console.log(inf.pid);
        values.id = inf.id
        values.pid = inf.pid
        const info = qs.stringify(values)
        // console.log(info);
        await changerShop(info)
        onClose()
        updata(1)
       

>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

<<<<<<< HEAD
    const getFileName = (imgsrc)=>{
        // console.log(imgsrc);
    }  
=======
    const getFileName = (imgsrc) => {
        // console.log(imgsrc);
    }
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40



    return (
        <div>
            <SettingOutlined onClick={showDrawer}></SettingOutlined>
            <Drawer title="修改商品" placement="right" onClose={onClose} open={open}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
<<<<<<< HEAD
                    style={{display:"flex",flexDirection:"column",width:"300px"}}
=======
                    style={{ display: "flex", flexDirection: "column", width: "300px" }}
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
                >
                    <Form.Item
                        label="商品名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入商品名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="goods_type_id"
                        label="商品类型"
                    >
                        <TreeSelect
                            showSearch
                            value={value}
                            dropdownStyle={{
                                height: 200

                            }}
                            placeholder="Please select"
                            allowClear
                            treeData={treeData}
                        />
                    </Form.Item>

                    <Form.Item
                        name="serviceTypeId"
                        label="服务类型"
                    >
                        <Select
                            placeholder=""
                            allowClear
                        >
                            <Option value="0">启用</Option>
                            <Option value="1">停用</Option>
                        </Select>

                    </Form.Item>

                    <Form.Item
                        name="descs"
                        label="描述"
                    >

                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="status"
                        label="状态"
                    >
                        <Select
                            placeholder=""
                            allowClear
<<<<<<< HEAD
                           
=======

>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
                        >
                            <Option value="1" >上架</Option>
                            <Option value="2" >下架</Option>
                        </Select>
<<<<<<< HEAD
                        </Form.Item>

                        <Form.Item
                            name="price"
                            label="价格"
                        >

                            <InputNumber min={1} max={100000} />
                        </Form.Item>

                        <Form.Item
                            name="counts"
                            label="数量"
                            width="400px"
                        >

                            <InputNumber min={1} max={100000} />
                        </Form.Item>

                        <Form.Item
                            name="photo"
                            label="商品图片"
                        >
                            <MyUpload  imageurl={inf.photo} getFileName={getFileName}/>
                        </Form.Item>

                
=======
                    </Form.Item>

                    <Form.Item
                        name="price"
                        label="价格"
                    >

                        <InputNumber min={1} max={100000} />
                    </Form.Item>

                    <Form.Item
                        name="counts"
                        label="数量"
                        width="400px"
                    >

                        <InputNumber min={1} max={100000} />
                    </Form.Item>

                    <Form.Item
                        name="photo"
                        label="商品图片"
                    >
                        <MyUpload imageurl={inf.photo} getFileName={getFileName} />
                    </Form.Item>


>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40

                    <Form.Item
                        wrapperCol={{
                            offset: 15,
                            span: 9,
                        }}
                    >
                        <div style={{ display: "flex", flexDirection: "row" }}>
                            <Button style={{ marginRight: "10px" }}>取消</Button>
                            <Button type="primary" htmlType="submit" style={{ marginRight: "10px" }}>
                                提交
                            </Button>
                        </div>

                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    )
}
